.flex {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 130px;
  height: 116px;
  border: 1px solid #ccc;
  margin: 8px;
  // background-color: #009688;
  border-radius: 4px;
  padding-top: 10px;
  padding-left: 10px;
  box-sizing: border-box;
  box-shadow: 8px 5px 8px -2px rgba(185, 183, 183, 0.8);
  cursor: pointer;
}

.text {
  color: #ffffff;
  text-align: left;
  font-size: 14px;
}

.f17 {
  font-size: 18px;
  font-weight: 600;
}

.bgc-bule {
  background-color: #6287f6;
}

.red {
  color: #e1665d;

}



.Span {
  // color: #fff;
  background-color: #e1665d;
  padding: 3px;
  // width: 50px;
  font-size: 12px !important;
  border-radius: 4px;
}

.f12 {
  font-size: 12px;
}

.Text {
  position: relative;
  cursor: pointer;
  margin: 0 2vw;
  font-size: 15px;
  font-weight: 550;
  height: 6vh;
  line-height: 5vh;
  width: 40%;
  text-align: center;
  overflow: hidden;
  /* 防止伪元素超出边界 */

  &::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    /* 初始宽度为0 */
    height: 2px;
    /* 线条高度 */
    background-color: rgb(255, 94, 0);
    transition: width 0.4s ease;
    /* 动画效果 */
  }

  &.active::before {
    width: 100% ;
    /* 激活时宽度为100% */
  }
}

.Title {
  font-size: 15px;
  // font-weight: 600;
  margin-bottom: 10px;
  position: relative;
  padding-bottom: 10px;
}



.Title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  /* 物理上仍是 1 px */
  background: rgba(0, 0, 0, .5);
  /* 50 % 透明 → 视觉 0.5 px */
  pointer-events: none;
  /* 不影响点击 */
}

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:2dppx) {
  .Title::after {
    transform: scaleY(.5);
    /* 把 1 px 压成 0.5 px */
    transform-origin: bottom;
  }
}


.btn {
  width: 150px;
  height: 40px;
  margin: 30px auto;
  line-height: 40px;
  // text-align: center;
  color: #000000;
  font-weight: 550;
 
  box-sizing: border-box;
  border-radius: 8px;
  background-color: #fff;
}


.Circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 10px 5px 0 18px;

}

.bgc-red {
  background-color: rgb(255, 69, 69);
}

.bgc-green {
  background-color: rgb(22, 186, 22);
}

.text-center {
  text-align: center !important;
  padding: 0;
}

.bgc-grey {
  background-color: #7a591b;
}


.bgc-btn-grey {
  background-color: #e3e1e1;
  box-shadow: 3px 2px 3px -1px rgba(185, 183, 183, 0.8);
  // font-size: 15px;

}

/* CSS */
.no-scrollbar {
  overflow-y: auto;          /* 保留滚动 */
}
.no-scrollbar::-webkit-scrollbar {
  width: 0 !important;       /* Chrome / Edge / Safari */
}
.no-scrollbar {
  scrollbar-width: none;     /* Firefox */
}




.rest {
  transition: opacity 0.2s;
}
.rest.hide {
  opacity: 0;
  pointer-events: none;   /* 可选，防止鼠标点穿 */
}


.mt10 {
  margin-top: 10px;
}
.mlr10 {
  margin-left: 10px;
  margin-right: 10px;
}

/* 弹窗本体 */
.right-menu {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  position: relative;          /* 让箭头相对它定位 */

  /* 箭头公共样式 */
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: solid transparent;
    pointer-events: none;
  }

  /* 下方箭头（弹窗在鼠标上方） */
  &.arrow-top::before {
    bottom: -8px;
    left: 16px;
    border-width: 8px 6px 0 6px;
    border-top-color: #d9d9d9;   /* 边框色 */
  }
  &.arrow-top::after {
    bottom: -7px;
    left: 16px;
    border-width: 7px 5px 0 5px;
    border-top-color: #fff;      /* 遮住边框形成空心 */
  }

  /* 上方箭头（弹窗在鼠标下方） */
  &.arrow-bottom::before {
    top: -8px;
    left: 16px;
    border-width: 0 6px 8px 6px;
    border-bottom-color: #d9d9d9;
  }
  &.arrow-bottom::after {
    top: -7px;
    left: 16px;
    border-width: 0 5px 7px 5px;
    border-bottom-color: #fff;
  }

  /* 左侧箭头（弹窗在鼠标右侧） */
  &.arrow-left::before {
    right: -8px;
    top: 12px;
    border-width: 6px 0 6px 8px;
    border-left-color: #d9d9d9;
  }
  &.arrow-left::after {
    right: -7px;
    top: 12px;
    border-width: 5px 0 5px 7px;
    border-left-color: #fff;
  }

  /* 右侧箭头（弹窗在鼠标左侧） */
  &.arrow-right::before {
    left: -8px;
    top: 12px;
    border-width: 6px 8px 6px 0;
    border-right-color: #d9d9d9;
  }
  &.arrow-right::after {
    left: -7px;
    top: 12px;
    border-width: 5px 7px 5px 0;
    border-right-color: #fff;
  }
}

/* 按钮行 */
.right-menu-item {
  padding: 4px 16px;
  cursor: pointer;
  font-size: 14px;
  &:hover {
    background: #f5f5f5;
  }
}
